<template>
  <div class="weui-panel full grey-bg" @click="playSound">
    <div class="member-banner" @click="showConfig">
      <img class="header" src="img/playerGroup/bull-icon.png" alt="">
      <div class="info">
        <div v-text="rule.confName"></div>
        <div>玩法俱乐部ID:
          <span v-text="rule.id"></span>
          &nbsp;&nbsp;<span class="text-small">(点击修改玩法配置)</span>
        </div>
      </div>
    </div>
    <div class="text-center" @click="showConfig">
      <img v-show="!showMemberDetail" class="arrows" src='img/icons/more_unfold.png'/>
      <img v-show="showMemberDetail" class="arrows" src='img/icons/less.png'/>
    </div>

    <div class="weui-cells name-label">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <p>玩法别名:
            <span v-text="rule.confName"></span>
            <a @click="aliasClicked" class="weui-btn weui-btn_mini weui-btn_primary pull-right">邀请玩家</a>
          </p>
        </div>
      </div>
    </div>

    <div v-show="!showMemberDetail" class="weui-cells name-label" ref="list">
      <div class="weui-cell weui-flex member-th">
        <div class="weui-flex__item">成员</div>
        <div class="weui-flex__item_3">昵称/ID</div>
        <div class="weui-flex__item">操作</div>
      </div>

      <div class="weui-cell weui-flex white-bg" v-for="(source, index) in listData" :key="index">
        <div class="weui-flex__item">
          <img class="list-user-img-width" :src="source.headUrl" alt="">
        </div>
        <div class="weui-flex__item_3">
          <p class="info-grey">{{source.nickname}}</p>
          <p>{{source.lftid}}</p>
        </div>
        <div class="weui-flex__item">
          <a class="weui-btn btn_mini weui-btn_default" @click="doAudit(source)">移除</a>
        </div>

      </div>

      <div class="no-data" v-show="!listData.length && !loading">
        <div>暂无成员</div>
        <div style="width: 80%;margin: 10px auto;">
          <a @click="aliasClicked" class="weui-btn weui-btn_primary">邀请玩家</a>
        </div>
      </div>

      <div class="weui-loadmore" v-show="loading">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
      </div>

    </div>

    <div v-show="showMemberDetail">
      <div v-if="rule.gameType === 1" class="weui-cells">
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">游戏类型: </label>
          </div>
          <div class="weui-cell__bd">
            经典牛牛
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">游戏玩法: </label>
          </div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.ruleType === 1}" @click="ruleTemp.jsonContent.ruleType = 1">抢庄</div>
              </div>
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.ruleType === 3}" @click="ruleTemp.jsonContent.ruleType = 3">牌大坐庄</div>
              </div>
            </div>
            <div class="weui-flex">
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.ruleType === 4}" @click="ruleTemp.jsonContent.ruleType = 4">轮庄</div>
              </div>
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.ruleType === 5}" @click="ruleTemp.jsonContent.ruleType = 5">霸王庄</div>
              </div>
            </div>
            <div class="weui-flex">
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.ruleType === 2}" @click="ruleTemp.jsonContent.ruleType = 2">牛牛坐庄</div>
              </div>
              <div class="weui-flex__item"></div>
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">局数选择: </label>
          </div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.turns === 1}" @click="ruleTemp.jsonContent.turns = 1">15局</div>(消耗5钻石)</div>
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.turns === 2}" @click="ruleTemp.jsonContent.turns = 2">30局</div>(消耗10钻石)</div>
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">可见手牌: </label>
          </div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.showCardCount === 4}" @click="ruleTemp.jsonContent.showCardCount = 4">4张</div>
              </div>
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.showCardCount === 3}" @click="ruleTemp.jsonContent.showCardCount = 3">3张</div>
              </div>
            </div>
            <div class="weui-flex">
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.showCardCount === 0}" @click="ruleTemp.jsonContent.showCardCount = 0">0张</div>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">支付方式: </label>
          </div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.payType === 1}" @click="ruleTemp.jsonContent.payType = 1">AA支付</div></div>
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.payType === 3}" @click="ruleTemp.jsonContent.payType = 3">群主支付</div></div>
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">玩法别名: </label>
          </div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <input class="weui-input" type="text" placeholder="玩法别名" v-model.trim="ruleTemp.confName">
            </div>
          </div>
        </div>
        <div class="weui-cells__title">微信群二维码</div>
        <div class="weui-cells">
          <div class="weui-cell text-center" v-if="modCrowdQr">
            <img :src="modCrowdQr" alt="" class="crowd-qr">
          </div>
          <div class="weui-cell">
            <div class="weui-uploader__input-box" style="margin: auto;">
              <input @change="headChange" ref="imageIptHead" id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="true">
            </div>
          </div>
        </div>
        <div class="weui-cell weui-flex">
          <div class="weui-flex__item" style="padding: 0 10px;">
            <a @click="saveGroupInfo" class="weui-btn weui-btn_primary">保存</a>
          </div>
          <div class="weui-flex__item" style="padding: 0 10px;">
            <a @click="cancelMod" class="weui-btn weui-btn_default">取消</a>
          </div>
        </div>
        <!-- <div class="weui-cell" @click="confirmSetting">
              <a class="weui-btn weui-btn_blue" style="width: 80%;">确认设置</a>
            </div> -->

        <div class="weui-cell" @click="deleteRule">
          <a class="weui-btn weui-btn_warn" style="width: 80%;">删除玩法</a>
        </div>

      </div>

      <div v-if="rule.gameType === 2" class="weui-cells">
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">游戏类型: </label>
          </div>
          <div class="weui-cell__bd">
            斗公牛
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">局数选择: </label>
          </div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.turns === 1}" @click="ruleTemp.jsonContent.turns = 1">1轮庄</div>(消耗5钻石)</div>
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.turns === 2}" @click="ruleTemp.jsonContent.turns = 2">2轮庄</div>(消耗10钻石)</div>
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">带入锅底: </label>
          </div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.bottomType === 1}" @click="ruleTemp.jsonContent.bottomType = 1">10分</div>
              </div>
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.bottomType === 2}" @click="ruleTemp.jsonContent.bottomType = 2">20分</div>
              </div>
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.bottomType === 3}" @click="ruleTemp.jsonContent.bottomType = 3">30分</div>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">可见手牌: </label>
          </div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.showCardCount === 4}" @click="ruleTemp.jsonContent.showCardCount = 4">4张</div>
              </div>
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.showCardCount === 3}" @click="ruleTemp.jsonContent.showCardCount = 3">3张</div>
              </div>
            </div>
            <div class="weui-flex">
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.showCardCount === 0}" @click="ruleTemp.jsonContent.showCardCount = 0">0张</div>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">支付方式: </label>
          </div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.payType === 1}" @click="ruleTemp.jsonContent.payType = 1">AA支付</div></div>
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.payType === 3}" @click="ruleTemp.jsonContent.payType = 3">群主支付</div></div>
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">玩法别名: </label>
          </div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <input class="weui-input" type="text" placeholder="玩法别名" v-model.trim="ruleTemp.confName">
            </div>
          </div>
        </div>
        <div class="weui-cells__title">微信群二维码</div>
        <div class="weui-cells">
          <div class="weui-cell text-center" v-if="modCrowdQr">
            <img :src="modCrowdQr" alt="" class="crowd-head">
          </div>
          <div class="weui-cell">
            <div class="weui-uploader__input-box" style="margin: auto;">
              <input @change="headChange" ref="imageIptHead" id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="true">
            </div>
          </div>
        </div>
        <div class="weui-cell weui-flex">
          <div class="weui-flex__item" style="padding: 0 10px;">
            <a @click="saveGroupInfo" class="weui-btn weui-btn_primary">保存</a>
          </div>
          <div class="weui-flex__item" style="padding: 0 10px;">
            <a @click="cancelMod" class="weui-btn weui-btn_default">取消</a>
          </div>
        </div>
        <div class="weui-cell" @click="deleteRule">
          <a class="weui-btn weui-btn_warn" style="width: 80%;">删除玩法</a>
        </div>

      </div>

      <div v-if="rule.gameType === 3" class="weui-cells">
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">游戏类型: </label>
          </div>
          <div class="weui-cell__bd">
            红中麻将
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">局数选择: </label>
          </div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.turns === 1}" @click="ruleTemp.jsonContent.turns = 1">八回合</div>(消耗5钻石)</div>
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.turns === 2}" @click="ruleTemp.jsonContent.turns = 2">十六回合</div>(消耗10钻石)</div>
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">中码规则: </label>
          </div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.ruleType === 1}" @click="ruleTemp.jsonContent.ruleType = 1">一码全中</div>
              </div>
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.ruleType === 2}" @click="ruleTemp.jsonContent.ruleType = 2">两个码</div>
              </div>
            </div>
            <div class="weui-flex">
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.ruleType === 3}" @click="ruleTemp.jsonContent.ruleType = 3">四个码</div>
              </div>
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.ruleType === 4}" @click="ruleTemp.jsonContent.ruleType = 4">六个码</div>
              </div>
            </div>
            <div class="weui-flex">
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.ruleType === 5}" @click="ruleTemp.jsonContent.ruleType = 5">八个码</div>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">游戏人数: </label>
          </div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.maxPlayerCount === 3}" @click="ruleTemp.jsonContent.maxPlayerCount = 3">3</div>
              </div>
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.maxPlayerCount === 4}" @click="ruleTemp.jsonContent.maxPlayerCount = 4">4</div>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">支付方式: </label>
          </div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.payType === 1}" @click="ruleTemp.jsonContent.payType = 1">AA支付</div></div>
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.payType === 3}" @click="ruleTemp.jsonContent.payType = 3">群主支付</div></div>
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">玩法别名: </label>
          </div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <input class="weui-input" type="text" placeholder="玩法别名" v-model.trim="ruleTemp.confName">
            </div>
          </div>
        </div>
        <div class="weui-cells__title">微信群二维码</div>
        <div class="weui-cells">
          <div class="weui-cell text-center" v-if="modCrowdQr">
            <img :src="modCrowdQr" alt="" class="crowd-head">
          </div>
          <div class="weui-cell">
            <div class="weui-uploader__input-box" style="margin: auto;">
              <input @change="headChange" ref="imageIptHead" id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="true">
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-flex__item" style="padding: 0 10px;">
            <a @click="saveGroupInfo" class="weui-btn weui-btn_primary">保存</a>
          </div>
          <div class="weui-flex__item" style="padding: 0 10px;">
            <a @click="cancelMod" class="weui-btn weui-btn_default">取消</a>
          </div>
        </div>
        <div class="weui-cell" @click="deleteRule">
          <a class="weui-btn weui-btn_warn" style="width: 80%;">删除玩法</a>
        </div>
      </div>
      
      <div v-if="rule.gameType === 5" class="weui-cells">
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">游戏类型: </label></div>
          <div class="weui-cell__bd">
            点子牛
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">局数选择: </label></div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <div class="weui-flex__item"><div class="rule_pick" :class="{active: ruleTemp.jsonContent.turns === 1}" @click="ruleTemp.jsonContent.turns = 1">15局</div>(消耗1钻石)</div>
              <div class="weui-flex__item"><div class="rule_pick" :class="{active: ruleTemp.jsonContent.turns === 2}" @click="ruleTemp.jsonContent.turns = 2">30局</div>(消耗2钻石)</div>
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">玩法: </label></div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <div class="weui-flex__item"><div class="rule_pick" :class="{active: ruleTemp.jsonContent.ruleType === 6}" @click="ruleTemp.jsonContent.ruleType = 6">牛牛几倍</div></div>
              <div class="weui-flex__item"><div class="rule_pick" :class="{active: ruleTemp.jsonContent.ruleType === 7}" @click="ruleTemp.jsonContent.ruleType = 7">牛牛相差</div></div>
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">可见手牌: </label></div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <div class="weui-flex__item"><div class="rule_pick" :class="{active: ruleTemp.jsonContent.showCardCount === 4}" @click="ruleTemp.jsonContent.showCardCount = 4">4张</div></div>
              <div class="weui-flex__item"><div class="rule_pick" :class="{active: ruleTemp.jsonContent.showCardCount === 3}" @click="ruleTemp.jsonContent.showCardCount = 3">3张</div></div>
            </div>
            <div class="weui-flex">
              <div class="weui-flex__item"><div class="rule_pick" :class="{active: ruleTemp.jsonContent.showCardCount === 0}" @click="ruleTemp.jsonContent.showCardCount = 0">0张</div></div>
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd">
            <label class="weui-label">支付方式: </label>
          </div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.payType === 1}" @click="ruleTemp.jsonContent.payType = 1">AA支付</div></div>
              <div class="weui-flex__item">
                <div class="rule_pick" :class="{active: ruleTemp.jsonContent.payType === 3}" @click="ruleTemp.jsonContent.payType = 3">群主支付</div></div>
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">玩法别名: </label></div>
          <div class="weui-cell__bd">
            <div class="weui-flex">
              <input class="weui-input" type="text" placeholder="玩法别名" v-model.trim="ruleTemp.confName">
            </div>
          </div>
        </div>
        <div class="weui-cells__title">微信群头像</div>
        <div class="weui-cells">
          <div class="weui-cell text-center" v-if="modCrowdQr">
            <img :src="modCrowdQr" alt="" class="crowd-head">
          </div>
          <div class="weui-cell">
            <div class="weui-uploader__input-box" style="margin: auto;">
              <input @change="headChange" ref="imageIptHead" id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="true">
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-flex__item" style="padding: 0 10px;">
            <a @click="saveGroupInfo" class="weui-btn weui-btn_primary">保存</a>
          </div>
          <div class="weui-flex__item" style="padding: 0 10px;">
            <a @click="cancelMod" class="weui-btn weui-btn_default">取消</a>
          </div>
        </div>
        <div class="weui-cell" @click="deleteRule">
            <a class="weui-btn weui-btn_warn" style="width: 80%;">删除玩法</a>
          </div>
        
      </div>

    </div>

  </div>
</template>

<script>
import { mapState, mapActions } from 'Vuex'
export default {
  data() {
    return {
      listData: [],
      loading: false,
      showMemberDetail: false,
      ruleTemp: {
        jsonContent: {}
      },
      offset: 0,
      limit: 50,
      noMore: false,
      modCrowdQr: undefined
    }
  },
  mounted() {
    if (this.ruleList.length === 0) {
      this.queryGroupInfo()
    }
    this.initRule(this.rule)
    // this.fakeData()
    this.queryMember()
    this.initInfinite()
  },
  // activated() {
  //   if (this.ruleList.length === 0) {
  //     this.queryGroupInfo()
  //   }
  //   this.offset = 0
  //   this.listData = []
  //   this.limit = 50
  //   this.initRule(this.rule)
  //   this.queryMember()
  // },
  methods: {
    ...mapActions(['queryGroupInfo']),
    headChange() {
      if (this.$refs.imageIptHead.files.length) {
        this.loadHead().then(result => {
          this.modCrowdQr = result
        })
      }
    },
    loadHead() {
      if (this.$refs.imageIptHead.files.length === 0) {
        return Promise.resolve()
      }
      const file = this.$refs.imageIptHead.files[0]
      return this.getImgData(file)
    },
    drawToCanvas: function(img, theW, theH, realW, realH) {
      var canvas = document.createElement('canvas')
      canvas.height = theH
      var ctx = canvas.getContext('2d')
      ctx.drawImage(
        img,
        0,
        0,
        realW,
        realH,
        0,
        0,
        theW,
        theH
      )
      var base64str = canvas.toDataURL('image/png')
      return base64str
    },
    getImgData(file) {
      return new Promise((resolve, reject) => {
        // 创建读取文件的对象  
        const reader = new FileReader()
        // 创建文件读取相关的变量  
        let imgFile
        // 为文件读取成功设置事件  
        reader.onload = e => {
          imgFile = e.target.result
          resolve(imgFile)
          // const img = document.createElement('img')
          // img.src = imgFile
          // setTimeout(() => {
          //   const smallImg = this.drawToCanvas(img, 200, 200, img.naturalWidth, img.naturalHeight)
          //   resolve(smallImg)
          // }, 1000)
        }
        // 正式读取文件
        reader.readAsDataURL(file)
      })
    },
    playSound() {
      window.btn_sound.play();
    },
    fakeData() {
      this.listData = [{nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}]
    },
    initInfinite() {
      const listHeight = document.body.offsetHeight - 140 + 'px'
      Object.assign(this.$refs.list.style, { height: listHeight, 'overflow-y': 'auto' })
      $(this.$refs.list).infinite().on('infinite', () => {
        if (this.loading) {
          return
        }
        this.offset += this.limit
        this.queryMember()
      });
    },
    queryMember(refresh) {
      const query = {
        confId: this.$route.query.id,
        limit: this.limit,
        offset: this.offset
      }
      this.loading = true
      this.api.group.getRuleMemberList(query).then(res => {
        if (res.ok) {
          return res.json()
        }
        return {result: 1}
      }).then(data => {
        console.log(data);
        this.loading = false
        if (data.result) {
          $(this.$refs.list).destroyInfinite()
          return
        }
        if (!data.data.dataList) {
          data.data.dataList = []
        }
        this.noMore = data.data.dataList.length === 0
        if (this.noMore) {
          $(this.$refs.list).destroyInfinite()
        }
        if (refresh === 'refresh') {
          this.listData = data.data.dataList
        } else {
          this.listData = this.listData.concat(data.data.dataList)
        }
      })
    },
    saveGroupInfo() {
      this.showMemberDetail = false
      console.log(this.$refs.imageIptHead.files.length);
      if (this.$refs.imageIptHead.files.length === 0) {
        this.api.group.modGroupConf(this.ruleTemp).then(res => res.json()).then(data => {
          $.alert(data.message)
          this.queryGroupInfo()
        })
        return 
      }
      const file = this.$refs.imageIptHead.files[0]
      if (file.size >= 2032420) {
        $.alert('图片太大')
        return
      }
      console.log(file);
      const url = this.api.group.getUploadPicUrl()     
      // const url = `https://lefantian.jiahuagame.com/game-lobby/media/image/fileUpload/${Cookies.get('areaCode')}`
      let formData = new FormData()
      formData.append('file', file)
      formData.append('name', file.name)
      const opt = {
        method: 'POST',
        mode: 'cors',
        body: formData,
        // body: {
        //   file: file,
        //   name: 'hahah'
        // },
        headers: {
          Authorization: Cookies.get('token'),
          // 'Content-type': null
          // 'Content-type': 'multipart/form-data;boundary=---------------------------7d33a816d302b6',
          // 'Content-Length': 1000
        }
      }
      console.log(opt);
      fetch(url, opt).then(res => {
        console.log(res)
        return res.json()
      }).then(data => {
        console.log(data);
        this.ruleTemp.crowdQr = data.data
        this.api.group.modGroupConf(this.ruleTemp).then(res => res.json()).then(data => {
          console.log(data)
          $.alert(data.message)
          this.queryGroupInfo()
        })
      })
      // if (this.modCrowdQr) {
      //   this.ruleTemp.crowdQr = this.modCrowdQr
      // }
      // this.api.group.modGroupConf(this.ruleTemp).then(res => res.json()).then(data => {
      //   console.log(data)
      //   $.alert(data.message)
      //   this.queryGroupInfo()
      // })
    },
    showConfig() {
      this.showMemberDetail = !this.showMemberDetail
      if (this.showMemberDetail) {
        this.modCrowdQr = this.ruleTemp.crowdQr
        console.log('this.modCrowdQr', this.modCrowdQr);
        // fetch(this.ruleTemp.crowdQr).then(res => {
        //   console.log('res', res)
        //   return res.text()
        // }).then(data => {
        //   this.modCrowdQr = data
        // })
      }
    },
    cancelMod() {
      this.showMemberDetail = false
      this.initRule(this.rule)
    },
    initRule(rule) {
      const ruleTemp = Object.assign({ jsonContent: '{}' }, rule)
      ruleTemp.jsonContent = JSON.parse(ruleTemp.jsonContent)
      console.log('ruleTemp', ruleTemp);
      this.ruleTemp = ruleTemp
    },
    deleteRule() {
      $.prompt({
        title: '确认删除',
        text: '再次输入要删除的玩法ID, 以删除该玩法',
        input: '俱乐部ID',
        empty: false, // 是否允许为空
        onOK: input => {
          if (parseInt(input) === this.rule.id) {
            this.api.group.deleteRule(this.rule.id).then(res => res.json()).then(data => {
              if (data.result) {
                return
              }
              $.alert('删除成功', () => {
                this.$router.push({name: 'myGroup'})
              })
            })
          }
        }
      });
    },
    aliasClicked() {
      $.prompt({
        title: '邀请玩家加入',
        text: '请输入邀请码',
        input: '',
        empty: false, // 是否允许为空
        onOK: input => {
          // 点击确认
          this.api.group.invitePlayer({
            confId: this.rule.id,
            lftid: input
          }).then(res => {
            if (res.ok) {
              return res.json()
            }
            return { message: '邀请码不存在' }
          }).then(data => {
            $.alert(data.message)
            this.queryMember('refresh')
          })
        },
        onCancel: function () {
          // 点击取消
        }
      })
    },
    doAudit(member) {
      console.log(member);
      $.confirm({
        title: `移除`,
        text: `确定移除玩家 ${member.nickname} ?`,
        onOK: () => {
          this.api.group.deleteRuleMember(member.id).then(res => res.json()).then(data => {
            console.log('移除', data);
            $.alert(data.message)
            this.queryMember('refresh')
          })
        }
      })
    }
  },
  watch: {
    rule(rule) {
      this.initRule(this.rule)
    }
  },
  computed: {
    ...mapState(['api', 'token', 'areaCode', 'user', 'ruleList']),
    rule() {
      return this.ruleList.find(rule => rule.id === parseInt(this.$route.query.id)) || {}
    }
  },
  components: {
  }
}

</script>

<style lang="less">
.member-banner {
  background-image: url(../../img/playerGroup/member-banner.png);
  background-size: cover;
  background-position-x: center;
  height: 80px;
  padding: 10px;
  &>.header {
    float: left;
    height: 60px;
    width: 60px;
  }
  &>.info {
    float: left;
    margin-left: 10px;
    margin-top: 3px;
    color: #fff;
  }
}

.name-label {
  margin-top: 5px;
}

.member-th {
  margin-top: 5px;
  background-color: #fff; // border-bottom: 1px solid #f4f4f4;
}

.list-user-img-width {
  width: 50px;
  border-radius: 5px;
}

.white-bg {
  background-color: #fff;
}

.text-small {
  font-size: 10px;
}

.text-middle {
  font-size: 12px;
}

.text-white {
  color: #fff;
}
</style>